<template>
	<view class="container">
		<view class="computed-view">
			<image src="/static/img_83.png" mode="" class="ranksimg"></image>
			<text class="gujia-title">估价范围(万元)</text>
			<text class="gujia-price">5.4万元</text>
			<text class="people-price-title">人工费</text>
			<text class="people-price">2.9万元</text>
			<view class="price-details">
				<view class="price-details-top">
					<view class="price-detail-item">
						<text class="price-detail-itemtitle">水电</text>
						<text class="price-detail-itemprice">1252.5</text>
					</view>
					<view class="price-detail-item">
						<text class="price-detail-itemtitle">水电</text>
						<text class="price-detail-itemprice">1252.5</text>
					</view>
				</view>
				<view class="price-details-bottom">
					<view class="price-detail-item">
						<text class="price-detail-itemtitle">水电</text>
						<text class="price-detail-itemprice">1252.5</text>
					</view>
					<view class="price-detail-item">
						<text class="price-detail-itemtitle">水电</text>
						<text class="price-detail-itemprice">1252.5</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
    page{
		width: 100%;
		height: 100%;
	}
	.container{
		width: 100%;
		height: 100%;
		background-color: rgba(243, 243, 243, 1);
		.computed-view{
			background-color: #FFFFFF;
			width: 680rpx;
			height: auto;
			position: relative;
			top: 30rpx;
			left: 35rpx;
			border-radius: 15rpx;
			box-shadow: 0px 0px 22px 2px rgba(0, 0, 0, 0.08);
			padding-top: 40rpx;
			.ranksimg{position: absolute;top: 0rpx;left: 30rpx;width: 67rpx;height: 110rpx;}
			.gujia-title{font-size: 27rpx;text-align: center;width: 100%;display: block;color: rgba(34, 34, 34, 1);}
			.gujia-price{color: rgba(14, 174, 100, 1);font-size: 50rpx;font-weight: bold;width: 100%;display: block;text-align: center;margin-top: 20rpx;}
			.people-price-title{font-size: 27rpx;text-align: center;width: 100%;display: block;margin-top: 30rpx;color: rgba(34, 34, 34, 1);}
			.people-price{font-size: 35rpx;display: block;width: 100%;text-align: center;margin-top: 20rpx;padding-bottom: 40rpx;border-bottom: 1rpx solid #F1F1F1;}
			.price-details{width: 620rpx;margin: auto;padding-top: 30rpx;padding-bottom: 50rpx;height: auto;}
			.price-details-top{width: 100%;display: flex;justify-content: space-around;font-size: 27rpx;color: rgba(34, 34, 34, 1);}
			.price-details-bottom{width: 100%;display: flex;justify-content: space-around;font-size: 27rpx;color: rgba(34, 34, 34, 1);}
			.price-detail-item{display: flex;font-size: 27rpx;color: rgba(34, 34, 34, 1);}
			.price-detail-itemprice{margin-left: 30rpx;}
		}
	}
</style>
